<template>
  <Category :scence="scence"></Category>
  <el-card style="margin-top: 25px">
    <el-button
      :disabled="!attrStore.category3Value"
      style="margin-bottom: 15px"
      type="primary"
      icon="Plus"
      @click="changeScence(Scence.write)"
      v-has="'btn.Attr.add'"
    >
      添加商品属性
    </el-button>
    <template v-if="scence == Scence.read">
      <el-table border :data="attrList">
        <el-table-column
          label="序号"
          width="120px"
          type="index"
        ></el-table-column>
        <el-table-column label="属性名称" prop="attrName"></el-table-column>
        <el-table-column label="属性值名称">
          <template #="{ row, index }">
            <el-tag type="primary" v-for="attrTag of row.attrValueList">
              {{ attrTag.valueName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template #="scope">
            <el-button size="small" v-has="'btn.Attr.update'">编辑</el-button>
            <el-button size="small" type="danger" v-has="'btn.Attr.remove'">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="scence == Scence.write">
      <el-form :inline="true">
        <el-form-item label="属性名称">
          <el-input
            v-model="attrParam.attrName"
            placeholder="请输入属性名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button
          type="primary"
          @click="addAttrValue"
          :disabled="!attrParam.attrName"
          icon="Plus"
        >
          添加商品值
        </el-button>
        <el-button type="primary" @click="changeScence(Scence.read)">
          取消
        </el-button>
      </div>
      <el-table :data="attrParam.attrValueList" style="margin: 15px 0">
        <el-table-column
          label="序号"
          width="120"
          type="index"
        ></el-table-column>
        <el-table-column label="属性值名称">
          <template #="{ row, index }">
            <el-input
              v-model="row.valueName"
              placeholder="请输入属性值"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #="{ row, index }">
            <el-button type="primary" @click="deleteValueName(index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button type="primary" @click="changeScence(Scence.read)">
          取消
        </el-button>
      </div>
    </template>
  </el-card>
</template>

<script setup lang="ts">
import { onMounted, ref, watch, reactive } from 'vue'
import Category from '../../../components/Category/index.vue'
import useAttrStore from '@/store/modules/attr'
import { reqAttrList, reqUpdateAttrList } from '@/api/attr'
import { Scence } from '@/views/product/attr/type'
import type { IUpdateAttrParam } from '@/api/attr/type'
import { ElMessage } from 'element-plus'
let attrStore = useAttrStore()
let attrList = ref([])
let scence = ref(Scence.read)
let attrParam = reactive<IUpdateAttrParam>({
  attrName: '',
  attrValueList: [],
  categoryId: attrStore.category3Value,
  categoryLevel: 3,
})
watch(
  () => {
    return attrStore.category3Value
  },
  async (a) => {
    reqAttrValueList()
  },
)
const reqAttrValueList = async () => {
  attrList.value = []

  if (attrStore.category3Value) {
    try {
      let result = await reqAttrList(
        attrStore.category1Value,
        attrStore.category2Value,
        attrStore.category3Value,
      )
      attrList.value = result.data
    } catch (e) {
      console.log(e)
    }
  }
}
const changeScence = (scenceParam: Scence) => {
  scence.value = scenceParam
  clearAttrParam()
}

const addAttrValue = () => {
  attrParam.attrValueList.push({
    valueName: '',
  })
}
const deleteValueName = (index) => {
  attrParam.attrValueList.splice(index, 1)
}
const save = async () => {
  try {
    let result = await reqUpdateAttrList(attrParam)
    if (result.code == 200) {
      scence.value = Scence.read
      ElMessage({
        type: 'success',
        message: '成功',
      })
      reqAttrValueList()
    } else {
      ElMessage({
        type: 'error',
        message: '失败',
      })
    }
  } catch (error) {
    console.log(error)
  }
}
const clearAttrParam = () => {
  attrParam = attrParam = reactive<IUpdateAttrParam>({
    attrName: '',
    attrValueList: [],
    categoryId: attrStore.category3Value,
    categoryLevel: 3,
  })
}
</script>
<style lang="scss" scoped></style>
